<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <div class="cntl">
            <span class="cntl-bar cntl-center" :style="{backgroundColor: obj.timeLineColor}">
                <span class="cntl-bar-fill"/>
            </span>
            <div class="cntl-states">
                <div class="cntl-state" v-for="(item, index) in obj.imgTextBox" :key="index">
                    <div class="cntl-image" :class="obj.animateImg? 'wow '+obj.animateImg : ''">
                        <div class="cnt1-image-text">
                            <img :src="item.imgUrl" :style="{width: obj.imgWidth+'px'}">
                            <h4 class="info" v-html="item.info"/>
                        </div>
                    </div>
                    <div class="fl-right">
                        <div class="cntl-content" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''">
                            <h4 v-html="item.title"/>
                            <p v-html="item.desc"/>
                        </div>
                    </div>
                    <div class="cntl-icon cntl-center" :style="{borderColor: obj.timeLineColor,backgroundColor: obj.timeLineIconBg}">
                        <i style="font-size: 30px;" v-if="item.icon" class="iconfont" :class="item.icon"/>
                        <span v-else>{{ index }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'ThreeColumns',
    mixins: [animate]
}
</script>
<style lang="scss" scoped>
    .content-wrapper{
        position: relative;
        .cntl {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .cntl-center {
            left:0;
            right:0;
            margin-left:auto;
            margin-right:auto;
        }

        .cntl-bar {
            position: absolute;
            width: 10px;
            top: 0;
            bottom: 0;
            background-color: #009ABB;
            box-shadow: inset 0px 0px 7px -2px #000;
        }

        .cntl-bar-fill {
            background-color: #009ABB;
            position: absolute;
            left:0;
            right:0;
            top:0;
            height:0;

        }

        .cntl-state {
            position: relative;
            width:100%;
            min-height: 200px;
            margin-bottom: 50px;
        }

        .cntl-state::after {
            display:block;
            content: ' ';
            clear:both;
        }

        .cntl-icon {
            border-radius: 50%;
            width: 60px;
            height: 60px;
            background-color: #00313C;
            border: solid 3px #009ABB;
            box-shadow: 0px 0px 19px -9px #000;
            position: absolute;
            top: 0;
            text-align: center;
            font-size: 30px;
            line-height: 60px;
            color: #fff;
        }
        .fl-right{
            float: left;
            width: 50%;
            padding: 30px 0px 20px 120px;
        }
        .cntl-content {
            min-width: 150px;
            width: 60%;
            padding: 20px;
            background-color: rgba(238, 238, 238, 0.25);
            border-radius: 8px;
            border-bottom: solid 3px #009ABB;
            float:left;
            position:relative;
        }

        .cntl-image {
            float:left;
            width: 50%;
            padding: 30px 120px 20px 0;
            .cnt1-image-text{
                min-width: 80px;
                float:right;
                text-align: center;
                .info{
                    padding: 5px 0;
                }
            }
        }
        .cntl-image img {
            width:100%;
            margin: 0 auto;
            border-radius: 50%;
        }

        .cntl-content h4 {
            font-size:20px;
            font-weight: normal;
            margin-bottom: 10px;
        }
    }
</style>

